import BreadCrumb from '@/components/breadcrumb/Breadcrumb'
import { Avatar } from 'antd'
import React, { useState } from 'react'
import './Profile.less'
import defaultAvatar from '../../assets/img/icon-default-avatar.png'

interface IProfileProps {}

function Trial() {
  return (
    <div className="trial vip-info-node">
      <div className="vip-info-detail">
        <div className="status-trial status-tag">免费试用</div>
        <div className="status-desc">免费试用中，为更友好的使用快去购买吧</div>
      </div>
      <div className="icon-trial icon-vip" />
    </div>
  )
}

export default function Profile(props: IProfileProps) {
  const [isVip, setIsVip] = useState(false)
  const avatarUrl = defaultAvatar
  const userName = 'Walt'
  const classDesc = '专业负责，耐心教学，善于调动学习积极性，关注学员持续学习与续学习与提升。'
  const selfIntro = '专业负责，耐心教学，善于调动学习积极性，关注学员持续学习与续学习与提升，发撒 发撒大法师大法师的发说地方。'

  return (
    <div className="profile">
      <BreadCrumb title="个人信息"></BreadCrumb>
      <div className="profile-class-row">
        <div className="profile-info-node info-block">
          <div className="profile-info">
            <Avatar size={96} src={avatarUrl} />
            <div className="name-mobile-node">
              <div className="display-name">{userName}</div>
              <div className="mobile">18118122716</div>
            </div>
          </div>
          {!isVip && <Trial />}
        </div>
        <div className="class-desc-node info-block">
          <div className="title-node">
            <span className="title">教室简介</span>
            <span className="edit">编辑</span>
          </div>
          <div className="desc-detail">{classDesc}</div>
          <img className="img-class-desc" src="" alt="" />
        </div>
      </div>
      <div className="user-intro-row info-block">
        <div className="title-node">
          <span className="title">自我介绍</span>
          <span className="edit">编辑</span>
        </div>
        <div className="user-intro-detail">
          <div className="icon-quote-left" />
          <div className="user-intro">{selfIntro}</div>
          <div className="icon-quote-right" />
        </div>
      </div>
    </div>
  )
}
